import {View, Text, FlatList, Image, TouchableOpacity} from 'react-native';
import React, {useEffect, useState} from 'react';
import {maniMenu} from '../service';
// 导入所有的 功能菜单 所需的图片
let icons = {
  cloud: require('../img/menu_cloud.jpg'),
  heart: require('../img/menu_heart.jpg'),
  order: require('../img/menu_order.jpg'),
  product: require('../img/menu_product.jpg'),
  refresh: require('../img/menu_refresh.jpg'),
  user: require('../img/menu_user.jpg'),
  userlock: require('../img/menu_userlock.jpg'),
};
// icons.cloud ===== icons['cloud']

export default function MainMenu({navigation, route}) {
  // 状态变量 => 统计信息
  let [statList, setStatList] = useState([]);

  // 状态变量 =>功能列表
  let [menuList, setMenuList] = useState([]);

  // -----------------------------------------------------------------

  // 声明周期方法 => 组件挂载时
  useEffect(() => {
    // 异步请求当前用户可用的功能菜单
    (async () => {
      let data = await maniMenu();
      // console.log(data);
      setStatList(data.statList);
      setMenuList(data.menuList);
    })();
  }, []);

  // -----------------------------------------------------------------

  // 渲染出一个 统计信息项 arr.forEach((e,i)=>{})
  let renderStatItem = ({item, index}) => {
    // console.log(x);
    // item ： 此次要渲染的数据
    // index ：改数据在原始数组中的下标
    return (
      <View
        style={{
          width: '50%',
          alignItems: 'center',
          paddingVertical: 20,
          borderBottomColor: '#000',
          borderWidth: 1,
        }}>
        <Text style={{fontSize: 15}}>{item.title}</Text>
        <Text
          style={{
            fontSize: 16,
            fontWeight: 'bold',
            color: item.color,
            marginVertical: 5,
          }}>
          {item.count}
        </Text>
        <Text style={{color: '#000'}}>{item.compare}</Text>
      </View>
    );
  };

  // -----------------------------------------------------------------

  // 渲染一个功能菜单项
  let renderMenuItem = ({item, index}) => {
    return (
      // activeOpacity:激活时的不透明度
      <TouchableOpacity
        onPress={() => navigation.navigate(item.href)}
        activeOpacity={0.6}
        style={{
          width: '50%',
          alignItems: 'center',
          paddingVertical: 20,
        }}>
        <Image source={icons[item.icon]}></Image>
        <Text style={{color: '#000', paddingVertical: 10}}>{item.title}</Text>
      </TouchableOpacity>
    );
  };

  // -----------------------------------------------------------------

  return (
    <View>
      <FlatList
        data={statList} // 需要渲染的数据 => 一般都是数组
        renderItem={renderStatItem} //如何渲染一个列表项
        numColumns={2} // 一行中列表项的数量
      />
      {/* F1:统计信息列表 */}
      {/* F2:功能菜单列表 */}
      <FlatList
        data={menuList}
        renderItem={renderMenuItem}
        numColumns={2}></FlatList>
    </View>
  );
}
